/* alwb.css
*  Note: css for dropdown menu is jquery.dropdown.css
*/


div.alwb-media-dropdown-div {
	font-size: 70% !important;
	position: absolute;
}
span.mediaMenuItemId {
    font-weight: bold;
    font-style: normal;
    color: red
}
span.mediaMenuItemPeople {
    font-weight: bold;
    font-style: normal;
    color: blue;
}

@font-face {
	font-family: "Arimo";
	src:
		url('fonts/Arimo-Bold.ttf') format('truetype'),
		url('fonts/Arimo-BoldItalic.ttf') format('truetype'),
		url('fonts/Arimo-Italic.ttf') format('truetype'),
		url('fonts/Arimo-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'ED Psaltica';
  src: url('fonts/Psaltica.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

html, body {
	font-family: "Arimo", sans-serif;
	font-size: 12pt;
    background-color: #FBF0D9;
    color: black; /* do not remove. Used in Javascript */
    height: 100%;
    width: 100%;
}
/* Properties for the Menu Bar */
div.agesMenu {
	border-style: none;
	font-size: 100%;
	width: 100%;
	min-width: 100%;
	max-width: 100%;
	background-color:#72A0CE;
	position: fixed;
	padding-top: 0px;
	padding-bottom: 0px;
	top: 0px;
	left: 0px;
	opacity: 1;
	z-index: 10000;
}

.agesMenu a .fa {
	font-size: 1em; 
}


/* Properties to control the spacing between menu bar icons
   and their color.
   Note that the alwb.js controls the sizing dynamically
   depending on various factors.
*/
i.ages-menu-link {
	padding: 0.25em;
	color: white;
}

/* Sets the color of icons in content div */
.content, .index-content > a >.fa {
    color: #000000;
}

/* Accordion Text*/
.panelTitle {
	font-size: 100%;
}
.panel-body {
	background-color: #FBF0D9;
}

div.panel-heading {
	background-color: #BCB6A9 !important;
}

/* Placeholders to change specific icons */
.fa-arrows {}
.fa-bars {
    padding-top: 1px;
}
.fa-byznote:before{
  font-family: 'ED Psaltica';
  font-size: 250%;
  content: "\006c";
  line-height: 0;
  position: relative;
  bottom: -18px;
}
.fa-calendar {}
.fa-caret-square-o-left {}
.fa-caret-square-o-right {}
.fa-columns {}
.fa-columns {}
.fa-envelope {}
.fa-info-circle {
	padding-left: 2px;
}
.fa-list-alt {}
.fa-minus {}
.fa-mobile {}
.fa-money {}
.fa-music {}
.fa-plus {}
.fa-question-circle {}
.fa-text-height {}
.fa-undo {}
.fa-volume-up {
	padding-left: 3px;
}

/* Sets properties for the Byzantine Music Score Icon */
.byzscore {
	height: 10pt;
	width: 15pt;
}

/* Properties of the "button" hyperlinks in the Index pages */
.IndexLink {
    font-size: 100% !important;
	background-color: #BCB6A9;
}

.container {
    position: absolute;
    left: -10px;
    height: 100%;
}

span.clockbox {
  font-family: "Arial Unicode MS", sans-serif;
  font-size: 0.75em;
  color: white;
  line-height: 0em;
  position: fixed;
  top: 1.2em;
  right: 5px;
}

/* Properties for the main content on a service or book */
div.content {
	position: absolute;
	top: 20px;
	left: 5px;
}

/* Properties for the content of an index page */
div.index-content {
	position: absolute;
	top: 30px;
	left: 5px;
}

span.media-icon {
    font-family: "Arimo", sans-serif;
    font-style:italic;
 	margin: 0 3px;
}

div.media-group {
    text-align:center;
    height:18pt;
}
div.media-group-empty {
    text-align:center;
    height:18pt;
}
.m-g-e {
}
.m-g-e::after {
	content:"(Other version has media.)";
	text-align:center;
	color:SlateGray;
	font-size:80%;
}
title, p.designation, p.mixed, p.mode, p.melody {
    font-family: "Arimo", sans-serif;
    text-align:center;
    font-weight:normal;
    font-size:95%;
  	margin-top: 6px;
  	margin-bottom: 0px;
}
p {
	color: black;   /* night mode #FBF0D9 */
    text-align: left;
    font-family: "Arimo", sans-serif;
    font-weight: normal;
    padding-left: -50px;
    margin-bottom: 0em; /* to control spacing after para */
}
p.actor {
    text-align:left;
    font-size:80%;
    color:red;
    font-weight:bold;
    text-indent: 0px;
    margin-top: 5px;
    margin-bottom: 0px;
}
p.actor:first-letter {
    text-align:left;
    font-size:125%;
}
p.break {
    margin-bottom: 10px;
}
p.chant {
    text-align:left;
    text-indent: 0px;
    line-height:150%;
    margin-bottom: 10px;
}
p.chant:first-letter {
    color:red;
    font-size:180%;
    font-weight:normal;
}
p.chapverse {
    font-weight:normal;
    font-style:italic;
    text-indent: 0px;
    text-align:center;
    color:red;
    font-size: 80%;
    margin-top: 0px;
    margin-bottom: 0px;
}
p.designation {
    font-style:normal;
    font-weight:bolder;
    color:red;
}
p.dialog {
    text-align:left;
    text-indent: 28px;
    font-size:95%;
    line-height:130%;
    margin-bottom: 5px;
}
p.dialogzero {
    text-align:left;
    text-indent: 28px;
    font-size:95%;
    line-height:130%;
    margin-bottom: 0px;
}
p.heirmos {
    text-align:left;
    text-indent: 0px;
    line-height:150%;
    margin-bottom: 10px;
}
p.heirmos:first-letter {
    color:red;
    font-size:180%;
    font-weight:normal;
}
p.hymn {
    text-align:left;
    text-indent: 0px;
    line-height:150%;
    margin-bottom: 10px;
}
p.hymn:first-letter {
    color:red;
    font-size:180%;
    font-weight:normal;
}
p.hymn:first-letter(drop) {
    float: left;
    font-size: 320%;
    line-height: 0.5em;
    padding-bottom: 0.05em;
    padding-top: 0.2em;
    padding-right: 0.05em;
    color:red;
}
p.hymnlinefirst {
    text-align:left;
    text-indent: 0px;
    line-height:150%;
    margin-bottom: 0;
}
p.hymnlinefirst:first-letter {
    color:red;
    font-size:180%;
    font-weight:normal;
}
p.hymnlinemiddle {
    text-align:left;
    text-indent: 0px;
    line-height:150%;
    margin-top: 0;
    margin-bottom: 0;
}
p.hymnlinelast {
    text-align:left;
    text-indent: 0px;
    line-height:150%;
    margin-top: 0;
    margin-bottom: 10px;
}
p.inaudible {
    text-indent: 28px;
	font-size:80%;
    text-align:left;
    line-height:150%;
}
p.mode {
    color:red;
    font-weight:bold;
}
p.mixed {
    font-weight:normal;
    font-style:normal;
}

p.melody {
    font-weight:normal;
    font-style:italic;
    color:red;
}
p.name {
    font-weight:normal;
    font-style:italic;
    color:red;
}
p.prayer {
    text-align:left;
    text-indent: 28px;
    line-height:150%;
    margin-bottom: 5px;
}
p.prayerzero {
    text-align:left;
    text-indent: 28px;
    line-height:150%;
    margin-bottom: 0px;
}
p.reading {
    text-align:left;
    text-indent: 28px;
    line-height:150%;
    margin-bottom: 5px;
}
p.readingzero {
    text-align:left;
    text-indent: 28px;
    line-height:150%;
    margin-bottom: 0em;
}
p.rubric {
    color:red;
    font-size:80%;
    font-style:italic;
    text-align:left;
    text-indent: 28px;
}
p.verse {
    text-align:left;
    text-indent: 28px;
    font-style:italic;
    font-size:100%;
    line-height:150%;
    margin-bottom: 5px;
}
p.versecenter {
    text-align:center;
    font-style:italic;
    font-size:90%;
    line-height:100%;
    margin-bottom: 5px;
}
p.cover1 {
    font-family: sans-serif;
    text-align:right;
    font-weight:normal;
    font-size:48pt;
    margin-top: 1in;
    margin-bottom: 1in;
}
p.cover2 {
    font-family: sans-serif;
    text-align:right;
    font-weight:bold;
    font-size:24pt;
    margin-bottom: 1em;
}
p.cover3 {
    font-family: sans-serif;
    text-align:right;
    font-weight:bold;
    font-size:12pt;
    color:red;
    text-indent: 20px;
    margin-left: 2in;
    margin-bottom: 2em;
}
p.cover4 {
    font-family: sans-serif;
    text-align:right;
    font-weight:bold;
    font-size:16pt;
    color:red;
    margin-bottom: 1em;
}
p.cover5 {
    font-family: sans-serif;
    text-align:right;
    font-weight:bold;
    font-size:16pt;
    margin-top: 1in;
}
.verticalLine {
	position:fixed;
	left: .5in;    
	border-left: thick solid #ff0000;
    height: 10in;
}
.horizontalLine {
 	position:fixed;
	top: .5in;    
    border-top: thick solid #ff0000;
    width: 7in;
}
p.credits1 {
    font-family: "Arimo", serif;
    margin-top: 1em;
    text-align:left;
    font-weight:bold;
    font-size:10pt;
    margin-bottom: 1em;
}
p.credits2 {
    font-family: "Arimo", serif;
    text-align:left;
    font-size:9pt;
}
p.credits3 {
    font-family: "Arimo", serif;
    text-align:left;
    font-size:9pt;
    margin-bottom: 1em;
}

span.melody {
	font-style:italic;
	color:red;	
}

span.mode {
	font-style:normal;
	font-weight:bolder;
	color:red;
}

span.designation {
	font-style:normal;
	font-weight:bolder;
	color:red;
}

span.rubric{
	font-variant:normal;
	font-weight:normal;
	font-style:italic;
	font-size:80%;
	color:red;	
}
span.italics {
	font-style:italic;
}
span.strong {
	font-weight:bold;
}
span.bigblack {
	font-weight:normal;
	font-style:normal;
	font-size:150%;
	display:inline-block;
	line-height:150%;
	color:black;
}
span.bold {
	font-weight:bold;
	font-style:inherit;
}
span.bolditalics {
	font-weight:bold;
	font-style:italic;
}

span.red {
	font-style:inherit;
	color:red;
}

span.boldred {
	font-weight:bold;
	color:red;
	font-style:inherit;
}

span.italicsred {
	font-style:italic;
	color:red;
}

span.bolditalicsred {
	font-weight:bold;
	font-style:italic;
	color:red;
}

table {
  margin: 0 3pt;
  padding: 0;
  border-collapse: collapse;
  border-spacing:0 5px;
  display: inline;
}
tr {
	border-spacing:0 5px;
}
td {
  vertical-align: top;
  width: 50%;
  padding-left: 8px;
  padding-right: 8px;
}
td.leftCell {
  border-right: thin solid silver;
}
.glyphicon {
 	margin: 0 3px;
}
iframe {
  border:  none;
  margin: 0;
  padding: 0;
}
#FrameLinks {
  width: 38%;
  position: fixed;
  top: 0;
  height: 2em;
  margin-top: 1em;
  z-index: 1;
}
#FrameText {
  width: 38%;
  height: 100%;
  position: fixed;
  z-index: 0;
}
#FrameAudio {
  width: 36.5%;
  position: fixed;
  bottom: 0;
  height: 4.5em;
  margin-bottom: -2.75em;
  z-index: 0;
}
#FrameScore {
  width: 61%;
  height: 100%;
  position: fixed;
  left: 39%;
  top: 0;
}
.index-title {
   text-align:center;
   font-size:100%;
   color:red;
   font-weight:bold;
   text-indent: 0px;
   margin-top: 5px;
   margin-bottom: 10px;

}
.index-title-date {
   text-align:center;
   font-size:100%;
   color:red;
   font-weight:bold;
   text-indent: 0px;
   margin-top: 5px;
   margin-bottom: 10px;

}
.index-desc-1 {
   text-align:left;
   text-indent: 28px;
   font-size:80%;
   line-height:100%;
   margin-bottom: 5px;
   max-width:350px;
}
.index-desc-2 {
   text-align:left;
   text-indent: 28px;
   font-size:80%;
   line-height:100%;
   margin-bottom: 5px;
   max-width:350px;
}
.index-desc-3 {
   text-align:left;
   text-indent: 28px;
   font-size:80%;
   line-height:100%;
   margin-bottom: 5px;
   max-width:350px;
}
.index-file-timestamp {
   font-size: 70%;
   font-weight:lighter;
   color: #6E6E6E;
   vertical-align: 2px;
}

.index-month-tr {
}
.index-month-td {
}
.index-month {
	color:red;
}

.index-day-tr {
}
.index-day-td {
}
.index-day-link {
}

.index-service-day-tr {
}
.index-service-day-td {
	padding-left: 0px !important;	
}
.index-service-day {
	color:red;
}
.index-commemoration {
	color: red;
}

.index-service-language-tr {
}
.index-service-language-td {
	vertical-align: middle;
	padding-right: 0px !important;
	width: 34%;
}
.index-service-language {
	vertical-align: middle;
}

.index-file-link-td {
	vertical-align: middle;
	width: 33%;
}
.index-file-link {
	vertical-align: middle;
}
.index-file-timestamp-td {
	vertical-align: middle;
	padding: 0px !important;
	width: 33%;
}

  .pixels {
        font-size:16px;
        line-height:30px;
        margin-bottom:20px;
        padding:20px;
        background-color:#222222;
    }
    .point {
        font-size:12pt;
        line-height:30px;
        margin-bottom:20px;
        padding:20px;
        background-color:#222222;
    }
    .em {
        font-size:1em;
        margin-bottom:20px;
        padding:20px;
        background-color:#222222;
    }
    .percentage {
        font-size:100%;
        margin-bottom:20px;
        padding:20px;
        background-color:#222222;
    }
    .undefined {
        margin-bottom:20px;
        padding:20px;
        background-color:#222222;
    }
    #changeFont {
        position:absolute;
        top:10px;
        right:10px;
        background-color:#333333;
        padding:5px;
    }
table.books-index-table {
	table-layout:fixed !important;
	width: 100% !important;
}
.index-books-language-td {
	vertical-align: middle;
	padding-right: 0px !important;
	width: 25% !important;
}
.index-books-language {
	vertical-align: middle;
}
.index-books-file-link-td {
	vertical-align: middle;
	padding-right: 0px !important;
	width: 45% !important;
}
.index-books-file-link {
	vertical-align: center;
}
.index-books-file-type-td {
	vertical-align: middle;
	padding: 0px !important;
	width: 25% !important;
}
.index-books-file-timestamp-td {
	vertical-align: middle;
	padding: 0px !important;
	width: 5% !important;
}

table.custom-index-table {
	table-layout:fixed !important;
	width: 60% !important;
}
.index-custom-language-td {
	vertical-align: middle;
	padding-right: 0px !important;
	width: 25% !important;
}
.index-custom-language {
	vertical-align: middle;
}
.index-custom-file-link-td {
	vertical-align: middle;
	padding-right: 0px !important;
	width: 25% !important;
}
.index-custom-file-link {
	vertical-align: center;
}
.index-custom-file-type-td {
	vertical-align: middle;
	padding: 0px !important;
	width: 25% !important;
}
.index-custom-file-timestamp-td {
	vertical-align: middle;
	padding: 0px !important;
	width: 25% !important;
}